<!-- 页头区域 -->
<nav th:fragment="navbar" class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- 顶部左侧的导航栏 -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
<!--        <li class="nav-item d-none d-sm-inline-block">-->
<!--            <a th:href="${#httpServletRequest.getContextPath()}" class="nav-link">后台首页</a>-->
<!--        </li>-->
<!--        <li class="nav-item d-none d-sm-inline-block">-->
<!--            <a target="_blank" th:href="@{'/'}" class="nav-link">博客首页</a>-->
<!--        </li>-->
    </ul>

    <!-- 顶部右侧的导航栏 -->
    <ul class="navbar-nav ml-auto">

        <!-- 通知 下拉菜单 -->
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#">
                <i class="far fa-bell"></i>
                <span class="badge badge-warning navbar-badge">7</span>
            </a>
            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                <span class="dropdown-header">7 个消息</span>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-envelope mr-2"></i> 4 新邮件
                    <span class="float-right text-muted text-sm">3 mins</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">
                    <i class="fas fa-file mr-2"></i> 3 新垃圾邮件拦截
                    <span class="float-right text-muted text-sm">2 days</span>
                </a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item dropdown-footer">查看所有通知</a>
            </div>
        </li>
        <!-- 系统 下拉菜单 -->
        <li class="nav-item dropdown">
            <a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">系统</a>
            <ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
                <li><a data-toggle="modal" data-target="#FaceLoginModal" onclick="openMedia()" class="dropdown-item cursor-pointer">录入人脸信息</a></li>
                <li><a data-toggle="modal" data-target="#changePasswordModal" onclick="Core.load('#changePasswordFormContent', '/user/changePassword')"class="dropdown-item cursor-pointer">修改密码</a></li>
                <li><a th:href="${'/logout'}" class="dropdown-item">退出登录</a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
                    class="fas fa-th-large"></i></a>
        </li>

    </ul>


    <div class="col-3 mt-3 mb-5" id="newEmailsInfoContent">
<!--        <div class="alert alert-default-primary" style="opacity: 0;width:50%;">-->
<!--            <div class="email-title">-->
<!--                <span class="h5">新邮件：</span>-->
<!--                <span>邮件消息内容长长长长长长长长长长长长长</span>-->
<!--            </div>-->
<!--            <div class="email-text">-->
<!--                我是邮件内容。。。。。。。。。。。。长长长-->
<!--            </div>-->
<!--            <div class="email-date">-->
<!--                <span class="float-right">发送时间</span>-->
<!--            </div>-->
<!--        </div>-->
<!--        <button class="btn btn-sm btn-primary float-right" onclick="getNewEmail();">弹出</button>-->
    </div>
    <script th:src="@{js/jquery.min.js}"></script>
    <script>
        function getNewEmail() {
            $('.alert').attr("style","opacity:1;width:100%;");
        }
        $(function () {
            let intervalFun = setInterval(function () {   //每隔1秒向后台查询一次结果
                // console.log("每秒向后台查一次数据");
                $.ajax({
                    url: '/mailbox/receiveNewEmail',
                    method: 'GET',
                    success: function (data) {
                        if(data.length > 0){
                            console.log(data);
                            let wrapper = $('#newEmailsInfoContent');
                            data.forEach(function(email){
                                let emailColor = "alert-default-primary";
                                let emailTips = "新邮件：";
                                if(email['mark']==="1" || email['mark']===1){
                                    emailColor = "alert-default-warning";
                                    emailTips = "垃圾邮件：";
                                }

                                wrapper.append(' <div id="emailInfo_' + email["id"] + '" class="alert '+emailColor+'" style="opacity: 0;width:50%;" xmlns="http://www.w3.org/1999/html">\n' +
                                    '            <div class="email-title">\n' +
                                    '                <span class="h5">'+emailTips+'</span>\n' +
                                    '                <a class="text-primary" href="#read/'+ email["id"] +'">'+ email["title"] +'</a>\n' +
                                    '            </div>\n' +
                                    '            <div class="email-text">\n' +
                                    '                '+ email["text"] +' ' +
                                    '            </div>\n' +
                                    '            <div class="email-date">\n' +
                                    '                <span class="float-right">'+ email["createTime"] +'</span>\n' +
                                    '            </div>\n' +
                                    ' </div>');
                                setTimeout(function () {
                                    $('#emailInfo_'+email["id"]).attr("style","opacity:1;width:100%;");
                                },100);
                                setTimeout(function () {
                                    $('#emailInfo_'+email["id"]).attr("style","opacity:0;width:50%;");
                                },6000);
                            });
                        }
                    },
                    error: function (data) {
                        // console.log("后台已关闭，停止查找新邮件");
                        clearInterval(intervalFun);
                    }
                })
            },3000);
        });
    </script>


</nav>